<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta HTTP-EQUIV="pragma" CONTENT="no-cache">
<meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<meta HTTP-EQUIV="expires" CONTENT="0">
<%
response.setHeader("Cache-Control","no-store");
response.setHeader("Pragrma","no-cache");
response.setDateHeader("Expires",0);
%>
<title>校园失物招领系统</title>
<style type="text/css">

</style>
<script type="text/javascript" src="./js/head.js"></script>
</head>
<body>
	<div id="user" style="width: 100%;height: 100%;" oncontextmenu="return false">
		<div class="header">
			<h3>帖子管理</h3>
			<img src='img/logo.png'>
		</div>
		<!-- ===========================================================主页面  -->
		<div v-show="pageA">
			<!-- ==============================================================查询条件 -->
			<div class="mt10 ml10 mr10 border" style="padding: 10px;">
				<div class="hand w200">
					<i class="el-icon-caret-bottom lan">查询条件</i>
				</div>
				<div class="flex wBetween mt10">
					<div>
						<span class="mr10">帖子名称</span>
						<el-input class='w200' v-model="tname" size="medium" clearable :maxlength='50'></el-input>
					</div>
					<div>
						<span class="mr10">所属板块</span>
						<!-- <el-input class='w200' v-model="pname" size="medium" clearable></el-input> -->
						<el-select v-model="pname" clearable >
					  		<el-option
					          v-for="item in plateList"
					          :key="item.pname"
					          :label="item.pname"
					          :value="item.pname">
					        </el-option>
					   </el-select>
					</div>
					<div>
						<span class="mr10">创建时间</span>
						<el-date-picker
					      v-model="createDate"
					      type="daterange"
					      range-separator="至"
					      start-placeholder="开始日期"
					      end-placeholder="结束日期"
					      size="medium" clearable>
					    </el-date-picker>
					</div>
				</div>
				<div class="flex wCenter mt10"><el-button type="primary" size="mini" @click="query">查询</el-button></div>
			</div>
	
			<div class="mt20 ml10 mr10 border" style="padding: 10px;">
				<div class="hand w200">
					<i class="el-icon-caret-bottom lan">列表详情</i>
				</div>
				<!-- 列表展示 -->
				<div class="mt10">
					<el-table :data="tableData" stripe border style="width: 100%;"  @selection-change="handleSelectionChange"><!-- -->
						<el-table-column type="selection" width="55"></el-table-column>
					    <el-table-column prop="tname" label="名称" head-align="center" align="center" sortable show-overflow-tooltip>
					    	<template slot-scope="scope" >
						        <el-badge value="new" class="new" v-if="scope.row.flag" >
						        	<span><a href="#" @click="open(scope.row.tid)">{{ scope.row.tname }}</a></span>
						        </el-badge>
						        <el-badge value="" v-else>
						        	<span><a href="#" @click="open(scope.row.tid)">{{ scope.row.tname }}</a></span>
						        </el-badge>
						    </template>
					    </el-table-column>
					    <!-- <el-table-column prop="tcontent" label="内容"></el-table-column> -->
					    <el-table-column prop="user.userName" label="创建人" head-align="center" align="center" sortable show-overflow-tooltip></el-table-column>
					    <el-table-column prop="t_create_time" label="创建时间" :formatter="dateFormat" head-align="center" align="center" sortable show-overflow-tooltip></el-table-column>
					    <el-table-column prop="plate.pname" label="所属板块" head-align="center" align="center" sortable show-overflow-tooltip></el-table-column>
					    <el-table-column prop="tstatus" label="状态" head-align="center" align="center" sortable show-overflow-tooltip>
					    	<template slot-scope="scope">
						        <span v-if="scope.row.tstatus==0">正常</span>
						        <span v-else-if="scope.row.tstatus==1">禁言</span>	        
						        <span v-else-if="scope.row.tstatus==2">删除</span>	        
						    </template>
					    </el-table-column>
					</el-table>
					
					<!-- bottons -->
					<div class="flex mt10">
						<!-- <el-button type="primary" size="mini" @click="add">新增</el-button>
						<el-button type="primary" size="mini" @click="update">修改</el-button> -->
						<el-button type="primary" size="mini" @click="del">删除</el-button>
					</div>
					
					<div class="flex wEnd mt10">
						<el-pagination @size-change="handleSizeChange"  @current-change="handleCurrentChange" :current-page="currPage"
					      :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" :total="total"
					      layout="total, sizes, prev, pager, next, jumper">
		   				</el-pagination>
					</div>
					
				</div>
				
			</div>
		</div>		
		<!-- ===========================================================新增页面  -->
		<div v-show="pageB" class="p10">
			<div class="div_border p10" style="">
				<el-form class="mt10" :model="topic" :rules="topicRules" ref="topicRef" label-position="left" label-width="100px" style="width:70%;margin:0 auto;">
					<el-form-item label="帖子主题" prop="tname">
					  <el-input v-model="topic.tname" clearable :maxlength='50'></el-input>
					</el-form-item>
					<div class="flex">
						<el-form-item label="所属板块" prop="pname">
						  <el-select v-model="topic.pname" clearable >
					  		<el-option
					          v-for="item in plateList"
					          :key="item.pid"
					          :label="item.pname"
					          :value="item.pid">
					        </el-option>
						  </el-select>
						</el-form-item>
						<el-form-item label="帖子状态" prop="tstatus" class="ml30">
						  <el-select v-model="topic.tstatus" clearable >
					  		<el-option
					          v-for="item in statusList"
					          :key="item.value"
					          :label="item.label"
					          :value="item.value">
					        </el-option>
						  </el-select>
						</el-form-item>
					</div>
					<el-input v-model="topic.tid" clearable v-show="false"></el-input>
					<el-form-item label="帖子内容" prop="tcontent">
					  <!-- <el-input clearable v-model="topic.tcontent" ></el-input> -->
					  <script type="text/plain" id="topicEditorEdit" style="width:100%;" :maxlength='300'></script>
					</el-form-item>
				<el-form>
				<div class="flex wCenter">
					<el-button type="primary" size="mini" @click="submit('topicRef')">提交</el-button>
					<el-button type="primary" size="mini" @click="back('topicRef')">返回</el-button>
				</div>
			</div>
		</div>
		<!-- ===========================================================详情  -->
		<el-dialog class='p10' v-model='topicData' :visible.sync='topicV' :close-on-click-modal=false width="70%" title="帖子详情">   
			<div style='border: 1px solid #dfe4ed;border-radius: 4px;padding: 10px 20px;'>
				<div class='flex wBetween'>
					<h1></h1>
					<h1>{{topicData.tname}}</h1>
					<h1></h1>
				</div>
				<div class='flex wBetween mt10'>
					<div><span>发布人: {{topicData.user.userName}}</span></div>
					<div><span>所属板块: {{topicData.plate.pname}}</span></div>
					<div><span>发布时间: {{topicData.createDate}}</span></div>
				</div>
				<div class="mt20" style="height:400px;" id="content"></div><!-- {{topicData.tcontent}} -->
				<div class="flex wEnd"><span>联系方式: {{topicData.user.tel}}</span></div>
			</div>
		</el-dialog>
		
	</div>
</body>
<script type="text/javascript" src="./js/topic.js"></script>
</html>